<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title>聊天室</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				padding: 0;
			}

			.chat-container {
				width: 400px;
				margin: 50px auto;
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 5px;
				overflow: hidden;
			}

			.chat-header {
				background-color: #007bff;
				color: #fff;
				padding: 10px;
				text-align: center;
			}

			.chat-messages {
				height: 300px;
				overflow-y: auto;
				padding: 10px;
				border-bottom: 1px solid #ccc;
			}

			.chat-input {
				padding: 10px;
			}

			.chat-input input {
				width: 80%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 3px;
			}

			.chat-input button {
				padding: 10px 20px;
				border: none;
				background-color: #007bff;
				color: #fff;
				border-radius: 3px;
				cursor: pointer;
			}

			.chat-input button:hover {
				background-color: #0056b3;
			}
		</style>
	</head>
	<body>
		<div class="chat-container">
			<div class="chat-header">
				<h3>简易RAG</h3>
			</div>
			<div class="chat-messages" id="chat-messages">
				<!-- 消息将显示在这里 -->
			</div>
			<div class="chat-input">
				<input type="text" id="message-input" placeholder="输入消息...">
				<button type="button" id="send-button" onclick="sendMessage()">发送</button>
			</div>
		</div>
	</body>
</html>


<script>
	function sendMessage() {
		const messageInput = document.getElementById('message-input')
		const msg = messageInput.value;
		addMyMessage(msg)

		axios({
				url: 'https://14a11b0.r10.cpolar.top/' + msg,
				method: 'get',
				Headers: {
					'Access-Control-Allow-Origin': true
				}
			})
			.then(response => {
				console.log(response.data);

				addwebMessage(response.data)
			})
			.catch(error => {
				console.error('Error:', error);
			});
	}



	function addwebMessage(message) {
		const chatMessages = document.getElementById('chat-messages');
		const messageElement = document.createElement('div');
		messageElement.textContent = message;
		messageElement.style.textAlign = 'left';
		chatMessages.appendChild(messageElement);
		chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	function addMyMessage(message) {
		const chatMessages = document.getElementById('chat-messages');
		const messageElement = document.createElement('div');
		messageElement.textContent = message;
		messageElement.style.textAlign = 'right';
		chatMessages.appendChild(messageElement);
		chatMessages.scrollTop = chatMessages.scrollHeight;
	}
</script>
<script src="./axios.min.js"></script>